<template>
	<view class="chart-con">
		<l-echart class="line-chart" ref="lineChart"></l-echart>
	</view>
</template>

<script>
	import * as echarts from '@/components/lime-echart/static/echarts.min.js';
	import lEchart from '@/components/lime-echart/components/l-echart/l-echart.vue';
	export default {
		components:{
			lEchart
		},
		data() {
			return {
				
			}
		},
		mounted() {
			
		},
		methods: {
			//加载折线图数据
			loadLineData(xDataList, yDataList) {
				//这里option配置参考文档：https://echarts.apache.org/zh/option.html
				let option = {
					xAxis: {
						type: 'category',
						// x轴数据文字颜色
						axisLabel: {
							color: '#a7a7a7'
						},
						// x轴那天坐标轴线的颜色
						axisLine: {
							lineStyle: {
								color: '#f1f1f1',
							}
						},
						//x轴上面刻度线隐藏
						axisTick: {
							show: false,
						},
						//这里是x轴数据
						data: xDataList
					},
					//设置网格
					grid: {
						top: 20,
						bottom: 30,
					},
					//y轴设置
					yAxis: {
						type: 'value',
						axisLine: {
							onZero: false
						},
						//y轴标签文字颜色
						axisLabel: {
							color: '#a7a7a7',
							formatter: function (value, index) {
							    if (value >= 10000) {
									value = value / 10000 + 'w';
								} else if (value >= 1000) {
									value = value / 1000 + 'k';
							    } else if (value < 1000) {
							        value;
							    }
							    return value;
						    },
						},
						// y轴分割线设置为虚线
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed'
							}
						}
					},
					//设置提示为点击时
					tooltip: {
						trigger: 'axis',
						triggerOn: 'click',
						formatter: '时间：{b} \n数据：{c}'
					},
					//设置曲线的颜色
					color: ['#FDCDAC'],
					series: [{
						//这里是数据
						data: yDataList,
						type: 'line',
						//设置为平滑，默认为折线
						smooth: true,
					}]
				};

				this.$refs.lineChart.init(echarts, chart => {
					chart.setOption(option);
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.chart-con {
		width: 100%;
		box-sizing: border-box;
		// padding-left: 32rpx;
	
		.line-chart {
			height: 380rpx;
		}
	}
</style>
